<template>
  <commonformdialog :isshowDialogs="isshowDialog" :dialogTitle="dialogTitle" @closetextDialog="closeDialog" @confirmbtn="confirmbtn"
    :dialogWidth="'40%'">
    <div class="formarea">
      <el-form ref="coachForm" :model="coachForms" :rules="rules" size="medium" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色" prop="role_id">
              <el-select v-model="coachForms.role_id" :disabled="coachForms.is_operator==1" placeholder="请选择角色" collapse-tags multiple clearable :style="{ width: '100%' }">
                <el-option v-for="(item, index) in roleOptions" :key="index" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="姓名" prop="nickname">
              <el-input v-model="coachForms.nickname" placeholder="请输入姓名" clearable :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="电话" prop="tel">
              <el-input v-model="coachForms.tel" :disabled="coachForms.is_operator==1" placeholder="请输入电话号码" clearable autocomplete="new-password" :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="coachForms.password" :placeholder="placeholderPassword" clearable autocomplete="new-password"
                :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
  </commonformdialog>
</template>
<script>
  import commonformdialog from '@/components/commondialog/commondialog'

  //按钮权限验证
  import checkPermission from '@/utils/permission'
  //api
  import {
    accountCreate,
    accountUpdate,
    accountRead,
    accountRoleOption,
  } from '@/api/rule'

  export default {
    data() {
      return {
        isdisableenroll: false,
        roleOptions: [],
        placeholderPassword:'',
        coachForms: {
          nickname: '',
          tel: '',
          password: '',
          role_id: '',
        },
        rules: {
          nickname: [],
          tel: [{
              required: true,
              message: '请输入电话号码',
              trigger: 'change',
            },
            {
              pattern: /^1(3|4|5|7|8|9|6)\d{9}$/,
              message: '手机号格式错误',
              trigger: 'blur',
            },
          ],
          role_id: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur',
          }, ],
        },
      }
    },
    components: {
      commonformdialog,
    },
    props: {
      //是否显示弹窗
      isshowDialog: {
        type: Boolean,
        default: false,
        required: true,
      },
      //表单的名字
      dialogTitle: {
        type: String,
        default: '',
        required: true,
      },
      //是编辑还是新增
      formType: {
        type: Number,
        default: 0,
      }, //是编辑还是新增

    },
    watch:{
       formType(val){
         this.placeholderPassword=val==0?'请输入密码（留空则需短信登录）':'若不修改密码则忽略该项';
         if(val==1 && this.coachForms.is_operator!=1){
            this.rules.nickname.push({
            required: true,
            message: '请选择角色',
            trigger: 'change',
          }, )
         }
       }
    },
    methods: {
      checkPermission,

      closeDialog() {
        //重置表单
        this.$refs['coachForm'].resetFields()
        this.$emit('closedialog')
      },
      confirmbtn() {
        this.$refs['coachForm'].validate(async (valid) => {
          if (!valid) return
          // TODO 提交表单
          let {
            nickname,
            tel,
            password,
            role_id,
            id
          } = this.coachForms
          let params = {
            nickname,
            tel,
            password,
            role_id: role_id.join(',')
          }
          if (this.formType == 0) {
            let data = await accountCreate(params)
            if (data.code == '0000') {
              this.$message({
                type: 'success',
                message: '添加成功!',
              })
            }
          } else {
            params.id = id
            let data = await accountUpdate(params)
            if (data.code == '0000') {
              this.$message({
                type: 'success',
                message: '编辑成功!',
              })
            }
          }
          //清空数据
          this.$refs['coachForm'].resetFields()
          this.$emit('confirm')
        })
      },
      //获取角色选项
      async getaccountRoleOption() {
        let data = await accountRoleOption()
        this.roleOptions = data.data
      },
    },

    mounted() {
      this.getaccountRoleOption()
      //点击编辑 获取回显数据
      this.$bus.on('editcoach', async (val) => {
        //获取要编辑的id
        let id = val.id
        let data = await accountRead({
          id: id,
        })
        this.coachForms = data.data
      })
    },
    destroyed() {
      this.$bus.off('editcoach')
    },
  }
</script>

<style scoped lang='scss'>
  .formtips {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 100px;
  }
</style>
